<template>
	<view class="content">
		<!-- #ifdef APP-PLUS -->
		<view v-for="(item,index) in providerList" :key="index">
			<image class="img-wrap" :src="item.icon" @tap="thirdLogin(item.provider)"></image>
			<view class="text">{{item.loginName}}</view>
		</view>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<button class="weixin-btn" open-type="getUserInfo" @getuserinfo="getUserInfo" withCredentials="true">
			<image class="img-wrap" src="/static/pic/share/Wx.png"></image>
			<view class="text" style="margin-top: -20px;">微信登录</view>
		</button>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapActions
	} from "vuex"
	export default {
		data() {
			return {
				providerList: []
			};
		},
		methods: {
			...mapActions("me",['login']),
			appServer_login(info){
				console.log(info)
				uni.request({
					url: this.$apiServer + "wxlogin",
					method: "POST",
					data: info,
					success: (retRes) => {
					
						this.login(retRes.data);
						uni.navigateBack();
					}
				})
			},
			wx_appLogin() {
				//1.登录授权,弹出授权窗体
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log(res)
						//2.授权登录成功以后，获取用户的信息
						uni.getUserInfo({
							provider: 'weixin',
							success: (infoRes) => {
								console.log(infoRes)
								//3.发送请求提交数据到服务端,服务端返回包含随机串用来验证
								this.appServer_login(infoRes.userInfo)	
							},
							fail: (err) => {
								console.log('err=' + JSON.stringify(err))
							}
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			getUserInfo(res) {
				console.log("oj")
				//1.获取code,利用code用来从后端获取openId和sessionKey
				uni.login({
					provider: 'weixin',
					success: (loginRes)=> {
						console.log("loginRes"+loginRes);
						let code=loginRes.code;
						// 2.获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							lang:"zh_CN",
							success: (infoRes) =>{
								console.log("userInfo"+infoRes.userInfo)
								// 3.获取openId并存储
								uni.request({
									url:this.$apiServer+"/wxAuth?code="+code,
									method:"POST",
									data:infoRes.userInfo,
									success: (resRet) => {
										//代码没有判断未成功.
										console.log(resRet.data);
										this.login(resRet.data);
										uni.navigateBack();
									}
								})
							}
						});
					}
				});
			},
			thirdLogin(provider) {
				if ((provider == '') || (provider == undefined) || (provider == null)) {
					uni.showToast({
						title: '错误，请联系管理员！',
						icon: 'none',
						duration: 3000
					});
				}
				if (provider == 'weixin') this.wx_appLogin();
			}
		},
		mounted() {
			uni.getProvider({
				service: "oauth",
				success: (res) => {
					res.provider.forEach(item => {
						let loginName = '';
						let icon = '';
						switch (item) {
							case 'weixin':
								loginName = '微信登录';
								icon = '/static/pic/share/Wx.png';
								break;
							case 'qq':
								loginName = 'QQ登录';
								icon = '/static/pic/share/QQ.png';
								break;
							case 'sinaweibo':
								loginName = '新浪微博登录';
								icon = '/static/pic/share/Weibo.png';
								break;
						}
						this.providerList.push({
							provider: item,
							loginName,
							icon
						})
					})
				},
				fail: (err) => {
					console.log(err)
				}
			})
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

	.weixin-btn{
		background:transparent;
		border :none;
	}
	.img-wrap {
		width: 48px;
		height: 48px;
	}

	.text {
		font-size: 14px;
	}
</style>
